<template>
	<view>
		<view class="shop-selecrt">
			<u-search placeholder="商品名称" v-model="keyword" shape="square" @search="searchBtn" ></u-search>
			<u-sticky bgColor="#fff" :enable="true">
				<u-tabs :list="tabsList" :is-scroll="false" active-color="#c9162e" :current="tabsCurrent"
					@change="tabsChange"></u-tabs>
			</u-sticky>
		
		</view>
		<view v-if="tabsCurrent === 0">
			<view class="shop">
				<view class="" v-for="(item,index) in shopList" class="shop-style" @click="goodsDetail(item)">
					<view class="shop-img">
						<img :src="item.image" alt="" style="width: 100%; height: 100%;">
					</view>
					<view class="shop-name">{{item.name}}</view>
					<view class="shop-tab">{{item.typeName }}</view>
					<view class="shop-money">{{item.pointsValue}} <text style="font-size: 22rpx;font-weight: 100;">积分</text> </view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {getpointsItemType,pointsItemList} from '@/utils/api.js'
	export default {
		data() {
			return {
				keyword:'',
				tabsList: [{
						name: '全部',
						disabled: false
					},
					
				],
				pointType:[],
				tabsCurrent: 0,
				shopList:[],
				typeId:'',
			}
		},
		methods: {
			tabsChange(index) {
				
				this.tabsCurrent = index;
				const info = this.pointType.find(item=>item.name == this.tabsList[index].name)
				this.typeId = info.id
				console.log(info);
			    
			},
			goodsDetail(item){
				uni.navigateTo({
						url: '/pages/info/goodsDetail?id=' + item.id
				})
			},
			async getpointsItemType(){
				uni.showLoading()
				const res = await getpointsItemType()
				if(res.code == 200){
					uni.hideLoading()
					this.pointType = res.data
					const tabsListA = res.data.map(v=>{
						return{
							name:v.name,
							disabled: false
						}
					})
					this.tabsList = [...this.tabsList,...tabsListA]
				}
			 	
			},
			async pointsItemList(){
				uni.showLoading()
				const data = {
					typeId:this.typeId,
					name:this.keyword
				}
				const {code,rows} = await pointsItemList(data)
				if(code == 200){
					uni.hideLoading()
				    this.shopList = rows
				}
			 	
			},
			searchBtn(){
				console.log("oooo");
				this.pointsItemList()
			}
		},
		onLoad(){
			this.getpointsItemType()
			this.pointsItemList()
		},
	}
</script>

<style>
.shop-selecrt{
	width: 100%;
	/* height: 50rpx; */
	background-color: #ffffff;
	padding: 20rpx 30rpx;
}
.shop{
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	flex-wrap: wrap;
	/* width: 200rpx; */

}
.shop-style{
	width: 346rpx;
	background-color: #ffffff;
	margin-bottom: 10rpx;
}
.shop-img{
	width: 100%;
	height: 346rpx;
}
.shop-name{
	font-weight: bold;
	margin-top: 10rpx;
	margin-left: 20rpx;
}
.shop-tab{
	width: 110rpx;
	height: 38rpx;
	text-align: center;
	line-height: 38rpx;
	border: 2rpx solid #ff491c;
	font-size: 20rpx;
	margin-left: 20rpx;
	margin-top: 10rpx;
	border-radius: 8rpx;
	color: #ff491c;
}
.shop-money{
	font-size: 36rpx;
	color: #ff491c;
	font-weight: bold;
	margin-left: 20rpx;
	margin-top: 10rpx;
}
</style>
